<!--
 * @Author: 王帅 wangshuai@vchangyi.com
 * @Date: 2024-05-07 10:52:16
 * @LastEditors: 王帅 wangshuai@vchangyi.com
 * @LastEditTime: 2024-05-16 15:08:00
 * @FilePath: \pcVue3\src\components\echart\echart_percent.vue
 * @Description: 
-->
<template>
    <echart :id="id" :width="_width" :height="_height" :option="_option"></echart>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// @ts-ignore
import echart from './echart.vue'
interface iconType {
    id: string;
    width?: number;
    height?: number;
    option: any,
    containerId?: string
}
const props = withDefaults(defineProps<iconType>(), {
    width: 200,
    height: 200,
})
let _width = ref(0)
let _height = ref(0)
let _option = ref()
window.onresize = function () {
    initSize(getContainerWidth())
}
function getContainerWidth(): number {
    let domW = 0
    if (props.containerId) {
        let dom = document.getElementById(props.containerId)
        if (dom) {
            domW = dom.clientWidth
        } else {
            domW = document.documentElement.clientWidth
        }
    } else {
        domW = document.documentElement.clientWidth
    }
    return domW
}
function initSize(containerWidth: number) {
    _width.value= containerWidth*(props.width/100)
    _height.value= containerWidth*(props.height/100)
    _option.value =initOptionSize(props.option)
}
function initOptionSize(option:any){
    return option
}
onMounted(()=>{
    console.log("onMounted")
    initSize(getContainerWidth())
})

</script>
<style lang="scss" scoped></style>